<template>
  <view class="container">
    <drawer ref="drawerRef" />
    <confirm-dialog ref="confirmDialogRef" />
    <view class="header" :style="{ paddingTop: safeAreaTop + 'px', height: completeSafeHeight + 'px' }">
      <view class="bars" @click="drawerRef.callOut()">
        <uni-icons type="bars" size="18" color="#ffffff"></uni-icons>
      </view>
      <next-bubble-menu
        :value="riderBasicInfo.workStatus"
        :list-data="stateRange"
        :relative-left-offset="15"
        :relative-top-offset="5"
        font-size="36rpx"
        list-padding="20rpx"
        @change="onWorkStatusChange"
      >
        <template v-slot="{ item, isExpand }">
          <view class="worker-state">
            <view class="state">
              <image class="state-image" :src="item?.iconImage" />
              <span class="state-name">{{ item?.label }}</span>
              <expand-indicator :is-expand="isExpand" padding="0 0 0 4rpx" />
            </view>
          </view>
        </template>
      </next-bubble-menu>
    </view>
  </view>
</template>

<script setup lang="ts">
import $store from '@/store'
import { ref, onMounted, computed } from 'vue'
import NextBubbleMenu from '@/components/next-bubble-menu/index.vue'
import Drawer from '../drawer/index.vue'
import $API from '@/api'
import ExpandIndicator from '@/components/expand-indicator/index.vue'
import ConfirmDialog from '@/components/confirm-dialog/index.vue'
import { type SessionData } from '@/components/confirm-dialog/type'
const { safeAreaTop, completeSafeHeight } = $store.app.getSystemParam()
// 侧边组件
const drawerRef = ref()
const confirmDialogRef = ref()
const stateRange = [
  {
    value: 0,
    label: '下线中',
    iconImage: '/static/image/worker-state/stop.svg'
  },
  { value: 1, label: '上线', iconImage: '/static/image/worker-state/working.svg' }
]
const riderBasicInfo = $store.user.info // basic info and setting info
// 获取当前用户的登录状态
onMounted(async () => {
  const result = await $API.rider.queryCommonInfos()
  if (result.success) {
    $store.user.info.value = result.data.info
    $store.user.riderSettings.value = result.data.riderSettings
    $store.user.systemSettings.value = result.data.systemSettings
  }
})
// 当状态改变时修改
async function onWorkStatusChange(newWorkStatus: number) {
  async function handle() {
    const updateWorkStatusResult = await $API.rider.changeWorkStatus(newWorkStatus)
    if (updateWorkStatusResult.success) riderBasicInfo.value.workStatus = newWorkStatus
  }
  if (newWorkStatus === 1) {
    const sessionData: SessionData = {
      thing: '你确定要上线吗？当你使用系统派单时，将会收到派送单',
      agreementAfter: handle
    }
    confirmDialogRef.value.askFor(sessionData)
  } else {
    handle()
  }
}
$store.user.workStatusChangeEvent.on((newWorkStatus) => onWorkStatusChange(newWorkStatus!))
</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  background-color: #1a1a1a;

  .header {
    display: flex;
    align-items: center;
    padding: 0 25rpx;
    width: 100%;
    box-sizing: border-box;

    $content-height: 65rpx;

    .bars {
      display: flex;
      justify-content: center;
      align-items: center;
      width: $content-height;
      height: $content-height;
      border-radius: 50%;
      background-color: #2f2f2f;
    }

    .worker-state {
      z-index: 100;

      // overflow: hidden;
      margin-left: 30rpx;
      padding: 0 30rpx;
      height: $content-height;
      font-size: 26rpx;
      border-radius: $content-height * 0.5;
      background-color: #2f2f2f;
      line-height: $content-height;

      .state {
        display: flex;
        justify-content: center;
        align-items: center;

        .state-image {
          width: 26rpx;
          height: 26rpx;
        }

        .state-name {
          display: inline-block;
          margin-left: 10rpx;
          color: #fff;
        }
      }
    }
  }
}
</style>
